<template>
	<view style="position: relative;">
		<HeaderVue title="报名"></HeaderVue>
		<scroll-view style="height: 100vh" scroll-y="true">
			<view style="padding: 40rpx 40rpx 240rpx 40rpx;overflow-y: scroll;">
				
				<view class="item" @click="showSelectType = true" v-if="data.need_select_type==1">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							选择类别
						</view>
					</view>
					<view class="bg row-between-center">
						<view :class="param.select_type?'selected':'hint'"> 
							{{param.select_type||'请选择'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
					
					
				</view>

				<view class="item" @click="showGroupType = true"  >
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							选择组别
						</view>
					</view>
					<view class="bg row-between-center">
						<view :class="param.group_type?'selected':'hint'"> 
							{{param.group_type||'请选择'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>

				<view class="item" v-if="param.sign_type==1">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							选手姓名
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected" v-model="param.name">
						</input>
					</view>
				</view>

				<view class="item" @click="showIdtype = true" v-if="param.sign_type==1">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							证件
						</view>
					</view>
					<view class="bg row-between-center">
						<view :class="param.id_type2?'selected':'hint'"> 
							{{param.id_type2||'请选择'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>

				<view class="item" v-if="param.sign_type==1">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							证件号码
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected" v-model="param.id_number">
						</input>
					</view>
				</view>

				<view class="item" @click="showAge = true" v-if="param.sign_type==1">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							选手年龄
						</view>
					</view>
					<view class="bg row-between-center">
						<view :class="param.age?'selected':'hint'"> 
							{{param.age||'请选择'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>

				<view class="item" @click="showAgency = true">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							学校/机构
						</view>
					</view>
					<view class="bg row-between-center">
						<view :class="param.school_agency2?'selected':'hint'"> 
							{{param.school_agency2||'请选择'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>

				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							名称
						</view>
					</view>
					<view class="tip">
						PS:请规范填写学校或机构全称
					</view>
					<view class="tip">
						例:昆山市实验小学。(填写时一律不分校区)
					</view>
					<view class="bg row-between-center" @click="showSchool = true">
						<view :class="param.agency_name1?'selected':'hint'"> 
							{{param.agency_name1||'请选择学校'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
					<view class="bg row-h-center">
						<input placeholder="没有我的学校/机构，请手动输入" placeholder-class="hint" class="selected"
							v-model="param.agency_name2" @input="inputAgency">
						</input>
					</view>
				</view>

				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							作品名称
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected"
							v-model="param.offering_name">
						</input>
					</view>
				</view>

				<view class="item">
					<view class="row-h-center">
						<view class="title">
							指导老师
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected" v-model="param.teacher">
						</input>
					</view>
				</view>

				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							家长或指导老师的联系电话
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected" v-model="param.parent_phone"
							inputmode="tel">
						</input>
					</view>
				</view>
				
				<view class="item" v-if="param.sign_type==2">
					
					<view class="row-between-center">
						<view class="row-h-center">
							<view class="require">
								*
							</view>
							<view class="title">
								参赛选手名单
							</view>
						</view>
						
						<image src="/static/images/add.png" class="upload-img4" @click="addName"></image>
						
					</view>
				
					<view class="file2 row-between-center" v-for="item in param.contestants2">
						<view class="row-h-center">
							<image class="upload-img3" src="/static/images/person.png">
							</image>
							<view class="file-name">
								{{item}}
							</view>
						</view>
						
					<image class="upload-img3" src="/static/images/del.png" @click="delName(index)">
					</image>
						
					</view>
				</view>
				
				
				
				<view class="item" v-if="param.sign_type==2">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							参赛选手平均年龄
						</view>
					</view>
					<view class="bg row-between-center" @click="showAvgAge = true">
						<view :class="param.avg_age?'selected':'hint'"> 
								{{param.avg_age||'请输入'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				

				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							上传作品
						</view>
					</view>
					<view style="display: flex; flex-wrap: wrap;" v-if="data.is_upload_image==1">
						<view class="upload2 row-h-center" v-for="(item,index) in param.image_files" :key="index"
							:style="index%3!=0?'margin-left:48rpx':''">
							<image :src="item" mode="aspectFit"></image>
							<image src="/static/images/img_delete.png" class="upload_delete" @click="delImg('img',index)">
							</image>
						</view>
						<view>
							<view class="upload col-center upload_border" @click="uploadClick('img')"
								:style="param.image_files.length %3!=0?'margin-left:48rpx':''">
								<image class="upload-img2" src="/static/images/img.png">
									<view class="upload-tip">上传照片</view>
							</view>
						</view>
					</view>

					<view style="display: flex; flex-wrap: wrap;" v-if="data.is_upload_video==1">
						<view class="upload2 row-h-center" v-for="(item,index) in param.video_files" :key="index"
							:style="index%3!=0?'margin-left:48rpx':''">
							<video  :src="item" mode="aspectFit" class="upload3"></video >
							<cover-image src="/static/images/img_delete.png" class="upload_delete" @click="delImg('video',index)">
							</cover-image>
						
						</view>
						<view>
							<view class="upload col-center upload_border" @click="uploadClick('video')"
								:style="param.video_files.length %3!=0?'margin-left:48rpx':''">
								<image class="upload-img2" src="/static/images/video.png">
									<view class="upload-tip">上传视频</view>
							</view>
						</view>
					</view>

					<view class="file row-center" v-if="data.is_upload_doc==1" @click="uploadClick('file')">
						<image class="upload-img3" src="/static/images/file.png">
						</image>
						<view class="upload-tip2">
							上传文件
						</view>
					</view>
					<view class="file2 row-between-center" v-for="item in param.doc_files2">
						<view class="row-h-center">
							<image class="upload-img3" src="/static/images/folder.png">
							</image>
							<view class="file-name singe-line">
								{{item.square}}
							</view>
						</view>

						<image class="upload-img3" src="/static/images/del.png" @click="delImg('file',index)">
						</image>

					</view>
				</view>


				<view class="item" @click="showCert = true">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							证书自提或邮寄
						</view>
					</view>
					<view class="bg row-between-center">
							<view :class="param.certificate_get_method1?'selected':'hint'"> 
							{{param.certificate_get_method1||'请选择'}}
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>


				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							收件地址（邮费自理）
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="收货人姓名" placeholder-class="hint" class="selected" v-model="param.mail_name"
							inputmode="tel">
						</input>
					</view>
					<view class="bg row-h-center">
						<input placeholder="收货人电话" placeholder-class="hint" class="selected" v-model="param.mail_phone"
							inputmode="tel">
						</input>
					</view>
					<view class="bg row-h-center">
						<input placeholder=" 收货人地址" placeholder-class="hint" class="selected"
							v-model="param.mail_address" inputmode="tel">
						</input>
					</view>
				</view>


			</view>
		</scroll-view>

		<view class="bottom" @click="submitData()">
			<view class="bottom-btn row-center">
				提交报名信息
			</view>
		</view>

		<u-picker :show="showSelectType" :columns="select_type_array" @confirm="confirmSelectType" @cancel="cancelPick"> </u-picker>
		<u-picker :show="showGroupType" :columns="group_type_array" @confirm="confirmGroupType" @cancel="cancelPick"></u-picker>
		<u-picker :show="showIdtype" :columns="id_type_array" @confirm="confirmIdType" @cancel="cancelPick"></u-picker>
		<u-picker :show="showAge" :columns="age_array" @confirm="confirmAge" @cancel="cancelPick"></u-picker>
		<u-picker :show="showAvgAge" :columns="age_array" @confirm="confirmAvgAge" @cancel="cancelPick"></u-picker>
		<u-picker :show="showAgency" :columns="school_agency_array" @confirm="confirmAgency" @cancel="cancelPick"></u-picker>
		<u-picker :show="showSchool" :columns="school_array" @confirm="confirmSchool" keyName="name" @cancel="cancelPick"></u-picker>
		<u-picker :show="showCert" :columns="certificate_get_method_array" @confirm="confirmCert"
			keyName="name" @cancel="cancelPick"></u-picker>

	</view>
</template>

<script>
	import HeaderVue from '@/components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {
				sign_id:'',
				showAvgAge:false,
				showCert: false,
				showAgency: false,
				showSchool: false,
				showAge: false,
				showSelectType: false,
				showGroupType: false,
				showIdtype: false,
				param: {
					activity_id: '',
					sign_type: '',
					select_type: '',
					group_type: '',
					name: '',
					id_type: '',
					id_number: '',
					age: '',
					avg_age: '',
					school_agency: '',
					school_agency2: '',
					agency_name: '',
					agency_name1: '',
					agency_name2: '',
					offering_name: '',
					teacher: '',
					parent_phone: '',
					contestants: '',
					contestants2: [],
					video_files:[],
					image_files:[],
					doc_files2:[],
					doc_files:[],
					certificate_get_method: '',
					certificate_get_method1: '',
					mail_name: '',
					mail_phone: '',
					mail_address: '',
				},
				img_array: [],
				video_array: [],
				file_array: [],
				data: {},
				select_type_array: [],
				group_type_array: [],
				school_array: [],
				id_type_array: [
					[
						"身份证", "护照", "台胞证"
					]

				],
				age_array: [],
				school_agency_array: [
					["学校", "机构"]
				],
				certificate_get_method_array: [
					["自提", "邮寄"]
				],
				imgs: []
			}
		},
		onLoad(option) {
			let aa = []
			for (let i = 1; i < 30; i++) {
				let bb = i + '';
				aa.push(bb)
			}
			this.sign_id = option.sign_id
			this.age_array.push(aa)
			console.log('age_array', this.age_array)
			this.param.activity_id = option.id
			this.param.sign_type = option.type
			this.getData()
			this.getSchool()
		
		},
		methods: {
			cancelPick(){
				this.showCert=false
				this.showAgency=false
				this.showSchool=false
				this.showAge=false
				this.showSelectType=false
				this.showGroupType=false
				this.showIdtype=false
			},
			delImg(type,index) {
				if(type =='img'){
					this.param.image_files.splice(index, 1)
				}
				if(type =='video'){
					this.param.video_files.splice(index, 1)
				}
				if(type =='file'){
					this.param.doc_files2.splice(index, 1)
				}
			},
			delName(index){
					this.param.contestants2.splice(index, 1)
			},
			async uploadClick(type) {
				
				let res
				if(type =='video'){
					 res = await this.$uploadVideo({
						count: 6
					})
				}else if(type =='img'){
					 res = await this.$uploadImageH5({
						count: 6
					})
				}else if(type =='file'){
					 res = await this.$uploadFileH5({
						count: 6
					})
				}
				console.log('uploadClickuploadClick', res)
				for (let item of res) {
					if(type =='img'){
						this.param.image_files.push(item.key)
					}
					if(type =='video'){
						this.param.video_files.push(item.key)
					}
					if(type =='file'){
						this.param.doc_files2.push(item)
					}
				}

			},
			confirmCert(e) {
				this.param.certificate_get_method1 = e.value[0]
				this.param.certificate_get_method = e.indexs[0]+1
				
				console.log(e)
				this.showCert = false
			},
			inputAgency(e){
				console.log('inputAgency',e)
				this.param.agency_name2 = e.detail.value
				this.param.agency_name1 = ''
			},
			confirmAgency(e) {
				this.param.school_agency2 = e.value[0]
				this.param.school_agency = e.indexs[0]+1
				
				console.log(e)
				this.showAgency = false
			},
			confirmSchool(e) {
				this.param.agency_name1 = e.value[0].name
				console.log(e)
				this.showSchool = false
				this.param.agency_name2 = ''
			},
			confirmSelectType(e) {
				this.param.select_type = e.value[0]
				console.log(e)
				this.showSelectType = false
			},
			confirmGroupType(e) {
				console.log(e)
				this.param.group_type = e.value[0]
				this.showGroupType = false
			},
			confirmIdType(e) {
				console.log(e)
				this.param.id_type = e.indexs[0]+1
				this.param.id_type2 = e.value[0]
				console.log('this.param.id_type',this.param.id_type)
				this.showIdtype = false
			},
			confirmAge(e) {
				console.log(e)
				this.param.age = e.value[0]
				this.showAge = false
			},
			confirmAvgAge(e) {
				console.log(e)
				this.param.avg_age =  parseInt(e.value[0])
				this.showAvgAge = false
			},
			
			addName(){
				let that =this
				   uni.showModal({
				        title: '添加参赛选手',
				        content: '',
				        editable:true,//是否显示输入框
						placeholderText:'请输入姓名',//输入框提示内容
				        confirmText: '确认',
				        cancelText: '取消',
				        success: (res) => {
				          if (res.confirm) {
							  if(res.content){
								  that.param.contestants2.push(res.content)
							  }
				            console.log('输入的内容：', res.content);
							
				          }
				        } 
				      });
				
			},
			
			async getSchool() {
				var res = await this.$req({
					url: 'api/schools/get_list',
				})
				if (res.code == 1) {
					this.school_array = [res.data]
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			showToast(title){
				uni.showToast({
					title:title,
					icon:'none'
				})
			},
			async getInfo() {
				var res = await this.$req({
					url: 'api/activities/my_sign_log_info',
					data:{
						sign_id:this.sign_id
					}
				})
				if (res.code == 1) {
					let ccc = res.data
					this.param = {...this.param,...ccc} 
					this.param.doc_files2 = []
					if(res.data.doc_files){
						this.param.doc_files = JSON.parse(res.data.doc_files)
						for(const item of this.param.doc_files){
							if(item){
								let index = item.indexOf('@')
								let aa = item.substr(index+1)
								this.param.doc_files2.push({
									square:aa,
									key:item
								})
							}
							
						}
					}
					if(res.data.image_files){
						this.param.image_files = JSON.parse(res.data.image_files)
					}
					if(res.data.video_files){
						this.param.video_files = JSON.parse(res.data.video_files)
					}
					this.param.id_type2 = this.id_type_array[0][this.param.id_type-1]
					this.param.certificate_get_method1 = this.certificate_get_method_array[0][this.param.certificate_get_method-1]
					this.param.school_agency2 = this.school_agency_array[0][this.param.school_agency]
					for(const item of this.school_array[0]){
						console.log('agency_name',item)
						if(item.name==this.param.agency_name){
							this.param.agency_name1 = this.param.agency_name
						}
					}
					if(!this.param.agency_name1){
						this.param.agency_name2 =this.param.agency_name
					}
					if(res.data.contestants){
						let aa = res.data.contestants
						this.param.contestants2 = aa.split(',')
						console.log('contestants2',this.param.contestants2)
					}
					
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async submitData() {
				if(this.data.need_select_type==1 && !this.param.select_type){
					this.showToast('请选择类别')
					return
				}
				if(!this.param.group_type){
					this.showToast('请选择组别')
					return
				}
				if(!this.param.name && this.param.sign_type==1){
					this.showToast('请输入姓名')
					return
				}
				if(!this.param.id_type && this.param.sign_type==1){
					this.showToast('请选择证件类型')
					return
				}
				if(!this.param.id_number && this.param.sign_type==1){
					this.showToast('请输入证件号码')
					return
				}
				if(!this.param.age && this.param.sign_type==1){
					this.showToast('请选择年龄')
					return
				}
			
				if(!this.param.school_agency){
					this.showToast('请选择学校/机构')
					return
				}
				if(!this.param.agency_name && !this.param.agency_name1 && !this.param.agency_name2){
					this.showToast('请输入或选择学校/机构名称')
					return
				}
				
				if(!this.param.offering_name){
					this.showToast('请输入作品名称')
					return
				}
				if(!this.param.parent_phone){
					this.showToast('请输入家长/指导老师电话')
					return
				}
			if(!this.param.avg_age && this.param.sign_type==2){
				this.showToast('请选择平均年龄')
				return
			}
			if( this.param.contestants2.length==0 && this.param.sign_type==2){
				this.showToast('请添加参赛选手')
				return
			}
				
				if(this.data.is_upload_image==1 && this.param.image_files==0){
					this.showToast('请上传图片')
					return
				}
				
				if(this.data.is_upload_video==1 && this.param.video_files==0){
					this.showToast('请上传视频')
					return
				}
				if(this.data.is_upload_doc==1 && this.param.doc_files2.length==0){
					this.showToast('请上传文件')
					return
				}
				if( !this.param.certificate_get_method){
					this.showToast('请选择证书获取方式')
					return
				}
				if( !this.param.mail_name){
					this.showToast('请输入收货姓名')
					return
				}
				if( !this.param.mail_phone){
					this.showToast('请输入收货电话')
					return
				}
				if( !this.param.mail_address){
					this.showToast('请输入收货地址')
					return
				}
			
				let files = []
				for(const item of this.param.doc_files2){
					files.push(item.key)
				}
				this.param.doc_files=files
				if(this.param.agency_name1){
					this.param.agency_name = this.param.agency_name1
				}
				if(this.param.agency_name2){
					this.param.agency_name = this.param.agency_name2
				}
				if( this.param.contestants2.length>0 && this.param.sign_type==2){
					this.param.contestants=this.param.contestants2.join(',')
				}
				var res = await this.$req({
					url: 'api/activities/add_sign_log',
					data: this.param
				})
				if (res.code == 1) {
					uni.showToast({
						title:'提交成功'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				console.log('resresres1111',res)
			},	
			
			async getData() {
				var res = await this.$req({
					url: 'api/activities/get_info',
					data: {
						id: this.param.activity_id,
					}
				})
				if (res.code == 1) {
					this.data = res.data
					if (res.data.types) {
						let aa = res.data.types.split(',')
						this.select_type_array.push(aa)
					}
					if (res.data.group_types) {
						let aa = res.data.group_types.split(',')
						this.group_type_array.push(aa)
					}
					console.log('select_type_array', this.select_type_array)
					console.log('group_type_array', this.group_type_array)
					if(this.sign_id){
						this.getInfo()
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #FFB6C1 0%, #FCE5E5 100%);
	}
</style>
<style scoped lang="scss">
	.item {
		margin-top: 40rpx;

		.title {
			margin-left: 10rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #8D2C48;
			line-height: 48rpx;
		}

		.require {
			font-weight: 400;
			font-size: 32rpx;
			color: #F61203;
			line-height: 48rpx;
		}

		.bg {
			padding: 0 30rpx;
			margin-top: 20rpx;
			height: 88rpx;
			background: #FFEFF3;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255, 69, 116, 0.2);
			border-radius: 16rpx;
			border: 2rpx solid #FDA2BC;
		}

		.hint {
			width: 700rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #D1A1AF;
			line-height: 48rpx;
		}

		.selected {
			width: 700rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #8D2C48;
			line-height: 48rpx;
		}

		.arrow {
			width: 20rpx;
			height: 20rpx;
		}

		.tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #8D2C48;
			line-height: 36rpx;
		}

		.upload {
			margin-top: 40rpx;
			width: 200rpx;
			height: 200rpx;
			background: #FFEFF3;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255, 69, 116, 0.2);
			border-radius: 16rpx;
			border: 2rpx solid #FDA2BC;

		}

		.upload2 {
			margin-top: 40rpx;
			position: relative;
			width: 200rpx;
			height: 200rpx;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255, 69, 116, 0.2);
			border-radius: 16rpx;
			border: 2rpx solid #FDA2BC;

		}
	.upload3 {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255, 69, 116, 0.2);
			border-radius: 16rpx;
			border: 2rpx solid #FDA2BC;

		}
		.upload-img4{
			width: 48rpx;
			height: 48rpx;
		}
		.upload_delete {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: -15rpx;
			top: -15rpx;
		}

		.upload-tip {
			margin-top: 10rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #8D2C48;
			line-height: 40rpx;
		}

		.upload-tip2 {
			margin-left: 12rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #8D2C48;
			line-height: 40rpx;
		}

		.upload-img {
			width: 32rpx;
			height: 32rpx;
		}

		.upload-img2 {
			width: 64rpx;
			height: 64rpx;
		}

		.upload-img3 {
			width: 40rpx;
			height: 40rpx;
		}

		.file {
			margin-top: 40rpx;
			width: 200rpx;
			height: 100rpx;
			background: #FFEFF3;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255, 69, 116, 0.2);
			border-radius: 16rpx;
			border: 2rpx solid #FDA2BC;
		}

		.file2 {
			padding: 0 30rpx;
			margin-top: 40rpx;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx dashed rgba(119, 55, 4, 0.4);
		}

		.file-name {
			margin-left: 12rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #8D2C48;
			line-height: 40rpx;
		}
	}

	.bottom {

		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(180deg, #FAB5CB 0%, #FF96AC 100%);
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		display: flex;
		padding: 20rpx;
		z-index: 1200;

		.bottom-btn {
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx -8rpx 16rpx 0rpx #FE92BF;
			border-radius: 46rpx;
			border: 4rpx solid;
			border-image: linear-gradient(180deg, rgba(250, 181, 203, 1), rgba(250, 181, 203, 1)) 0 0;
			font-weight: 600;
			font-size: 28rpx;
			color: #FF5280;
			line-height: 44rpx;
		}

	}
</style>